<template>
  <div class="base-search">
    <div class="expand-header" v-if="expand">
      <span>筛选条件</span>
      <span @click="isToogle = !isToogle">
        {{ isToogle ? '收起' : '展开' }}
        <el-icon class="transIcon" :class="isToogle ? 'transform0' : 'transform180'"><ArrowDown /></el-icon>
      </span>
    </div>
    <base-form
      v-show="isToogle"
      label-width="108px"
      label-position="left"
      :optionConfig="{ type: 'search' }"
      :schema="schema"
      :is-col="true"
      :isSearch="true"
      @register="register"
      @submitForm="submitForm"
    >
      <template #search>
        <div class="searchBtn" style="margin-bottom: 8px;">
          <el-button type="primary" @click="submitForm">筛选</el-button>
          <el-button v-if="showReset" type="info" @click="resetForm">重置</el-button>
          <el-button v-if="showSetting" type="info" @click="settingClick">筛选设置</el-button>
        </div>
      </template>
    </base-form>
  </div>
</template>

<script setup name="BaseSearch">
// , onBeforeUnmount
import { ref, unref, watch, nextTick } from 'vue'
import { useForm } from './useForm'
import BaseForm from 'components/base-form/index.vue'

const { register, formRef, formData, isSelect } = useForm()
const emit = defineEmits(['search-submit', 'reset-submit'])
defineProps({
  // 风格
  layout: {
    type: String,
    default: 'classic'
  },
  expand: {
    //是否显示伸缩按钮
    type: Boolean,
    default: false
  },
  // 是否显示重置按钮
  showReset: {
    type: Boolean,
    default: true
  },
  // 是否显示筛选设置按钮
  showSetting: {
    type: Boolean,
    default: false
  },
  // 布局展示的数据
  schema: {
    type: Array,
    required: true,
    default: () => []
  }
})
// 是否显示筛选框
const isToogle = ref(true)
// 点击搜索按钮事件
const submitForm = () => {
  unref(formRef).validate((valid) => {
    if (valid) {
      emit('search-submit', formData.value)
    } else {
      return false
    }
  })
}
//筛选字段设置弹框
const settingClick = () => {}
// 重置按钮事件
const resetForm = () => {
  unref(formRef).resetFields()
  emit('reset-submit', formData.value)
}
// 监听筛选条件的数据变化
watch(
  isSelect,
  (flag) => {
    nextTick(() => {
      // 业务做接口数据拦截（选择状态字段，调用接口直接搜索对应结果）
      if (flag == true) {
        emit('search-submit', formData.value)
      }
    })
  },
  {
    immediate: true,
    deep: true
  }
)

defineExpose({
  resetForm
})
</script>
<style lang="scss" scoped>
.base-search {
  :deep(.el-form-item__label) {
    padding-right: 0;
    border: 1px solid var(--el-border-color);
    border-right: none;
    padding: 0 10px;
  }
  .expand-header {
    display: flex;
    align-items: center;
    padding: 0px 0 16px 0;
    span {
      font-size: var(--el-menu-item-font-size);
      display: flex;
      align-items: center;
      user-select: none;
      &:nth-child(2) {
        padding: 5px 11px;
        cursor: pointer;
        margin-left: 12px;
        box-shadow: 1px 0 0 0 var(--el-border-color), 0 1px 0 0 var(--el-border-color) inset, 0 -1px 0 0 var(--el-border-color) inset,
          1px 0 0 0 var(--el-border-color) inset;
      }
    }
  }
  .transIcon {
    transition: 0.2s all;
    margin-left: 4px;
  }
  .transIcon.transform0 {
    transform: rotate(0deg);
  }
  .transIcon.transform180 {
    transform: rotate(180deg);
  }
  .searchBtn {
    margin-bottom: 8px;
  }
}
</style>
